<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <king-item v-for="kingTemp in kingList" :king="kingTemp"></king-item>
        </ul>
    </div>
</body>
    <script>
        //组件注册
        Vue.component(
            //组件的名称
            "king-item",
            //组件的内容
            {
                //需要往组件中传值
                props:['king'],
                template:"<li>{{king.id}}=={{king.name}}==king.age</li>"
            }
        )
            var  vue= new Vue({
                el:"#app",
                data:{
                    //数据
                    "kingList":[
                        {"id":1,"name":"刘德华","age":60},
                        {"id":2,"name":"张学友","age":62},
                        {"id":3,"name":"郭富城","age":60},
                        {"id":4,"name":"黎明","age":59}
                    ]
                }

            })
    </script>
</html>
